<template>
  <div>
  <!-- 主内容区域 -->
  <div class="main-content">
    <div class="page-title">粉丝画像</div>

    <!-- 粉丝画像 -->
    <div class="fans-profile">
      <div class="profile-header">
        <div class="profile-title">粉丝画像分析</div>
        <div class="profile-filters">
          <div class="date-filter">
            <span>时间范围：</span>
            <el-radio-group v-model="timeRange">
              <el-radio-button label="7d">近7天</el-radio-button>
              <el-radio-button label="30d">近30天</el-radio-button>
              <el-radio-button label="90d">近90天</el-radio-button>
              <el-radio-button label="180d">近180天</el-radio-button>
            </el-radio-group>
          </div>
          <el-button type="text" size="small" class="export-button" @click="exportData">
            <i class="fa-solid fa-download"></i> 导出数据
          </el-button>
        </div>
      </div>

      <!-- 粉丝画像卡片 -->
      <div class="profile-cards">
        <div class="profile-card">
          <div class="card-title">性别分布</div>
          <div class="card-content">
            <canvas id="genderChart"></canvas>
          </div>
        </div>

        <div class="profile-card">
          <div class="card-title">年龄分布</div>
          <div class="card-content">
            <canvas id="ageChart"></canvas>
          </div>
        </div>

        <div class="profile-card">
          <div class="card-title">地域分布</div>
          <div class="card-content">
            <canvas id="locationChart"></canvas>
          </div>
        </div>

        <div class="profile-card">
          <div class="card-title">粉丝等级</div>
          <div class="card-content">
            <canvas id="levelChart"></canvas>
          </div>
        </div>
      </div>

      <!-- 粉丝兴趣标签 -->
      <div class="interest-tags">
        <div class="tags-header">
          <div class="tags-title">粉丝兴趣标签</div>
          <el-button type="text" size="small" @click="refreshTags">
            <i class="fa-solid fa-refresh"></i> 刷新
          </el-button>
        </div>

        <div class="tags-container">
          <div class="tag-item tag-large" v-for="(tag, index) in topTags" :key="index">
            <i class="fa-solid fa-hashtag"></i> {{ tag.name }} <span class="tag-count">{{ tag.count }}</span>
          </div>

          <div class="tag-item tag-medium" v-for="(tag, index) in mediumTags" :key="index">
            <i class="fa-solid fa-hashtag"></i> {{ tag.name }} <span class="tag-count">{{ tag.count }}</span>
          </div>

          <div class="tag-item tag-small" v-for="(tag, index) in smallTags" :key="index">
            <i class="fa-solid fa-hashtag"></i> {{ tag.name }} <span class="tag-count">{{ tag.count }}</span>
          </div>
        </div>
      </div>

      <!-- 粉丝活跃时间 -->
      <div class="active-time">
        <div class="active-header">
          <div class="active-title">粉丝活跃时间</div>
          <div class="active-filters">
            <el-radio-group v-model="activeTimeType">
              <el-radio-button label="daily">日活跃</el-radio-button>
              <el-radio-button label="weekly">周活跃</el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="active-chart">
          <canvas id="activeTimeChart"></canvas>
        </div>
      </div>

      <!-- 粉丝设备分布 -->
      <div class="device-distribution">
        <div class="device-header">
          <div class="device-title">粉丝设备分布</div>
          <el-button type="text" size="small" @click="refreshDeviceData">
            <i class="fa-solid fa-refresh"></i> 刷新
          </el-button>
        </div>

        <div class="device-content">
          <div class="device-chart">
            <canvas id="deviceChart"></canvas>
          </div>

          <div class="device-list">
            <div class="device-item" v-for="(device, index) in deviceData" :key="index">
              <div class="device-name">
                <i :class="`fa-brands fa-${device.icon}`"></i> {{ device.name }}
              </div>
              <div class="device-info">
                <el-progress :percentage="device.percentage" :stroke-width="12" :color="device.color"></el-progress>
                <div class="device-percentage">{{ device.percentage }}%</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 粉丝消费能力 -->
      <div class="consumption-ability">
        <div class="consumption-header">
          <div class="consumption-title">粉丝消费能力</div>
          <el-button type="text" size="small" @click="refreshConsumptionData">
            <i class="fa-solid fa-refresh"></i> 刷新
          </el-button>
        </div>

        <div class="consumption-chart">
          <canvas id="consumptionChart"></canvas>
        </div>
      </div>
    </div>
  </div>

  </div>
</template>

<script>
import Chart from 'chart.js/auto';
export default {
  name: "FansProfile",
  components: {
    // 这里可以添加组件
  },
  data() {
    return {
      activeMenu: 'fans-profile',
      timeRange: '30d',
      activeTimeType: 'daily',
      // 粉丝画像数据
      genderData: [],
      ageData: [],
      locationData: [],
      levelData: [],
      // 兴趣标签
      topTags: [],
      mediumTags: [],
      smallTags: [],
      // 设备数据
      deviceData: [],
      // 消费能力数据
      consumptionData: []
    }
  },
  mounted() {
    // 初始化数据
    this.initData();

    // 绘制图表
    this.$nextTick(() => {
      this.drawGenderChart();
      this.drawAgeChart();
      this.drawLocationChart();
      this.drawLevelChart();
      this.drawActiveTimeChart();
      this.drawDeviceChart();
      this.drawConsumptionChart();
    });
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    initData() {
      // 初始化性别分布数据
      this.genderData = [
        { label: '女性', value: Math.floor(Math.random() * 20) + 70 },
        { label: '男性', value: Math.floor(Math.random() * 20) + 10 },
        { label: '其他', value: 0 }
      ];
      this.genderData[2].value = 100 - this.genderData[0].value - this.genderData[1].value;

      // 初始化年龄分布数据
      this.ageData = [
        { label: '18岁以下', value: Math.floor(Math.random() * 10) + 5 },
        { label: '18-24岁', value: Math.floor(Math.random() * 30) + 20 },
        { label: '25-30岁', value: Math.floor(Math.random() * 30) + 30 },
        { label: '31-35岁', value: Math.floor(Math.random() * 20) + 15 },
        { label: '36-40岁', value: Math.floor(Math.random() * 10) + 5 },
        { label: '40岁以上', value: Math.floor(Math.random() * 5) + 2 }
      ];

      // 初始化地域分布数据
      this.locationData = [
        { label: '广东', value: Math.floor(Math.random() * 20) + 10 },
        { label: '北京', value: Math.floor(Math.random() * 15) + 5 },
        { label: '上海', value: Math.floor(Math.random() * 15) + 5 },
        { label: '江苏', value: Math.floor(Math.random() * 10) + 3 },
        { label: '浙江', value: Math.floor(Math.random() * 10) + 3 }
      ];
      this.locationData[4].value = 100 - this.locationData.reduce((sum, item) => sum + item.value, 0);

      // 初始化粉丝等级数据
      this.levelData = [
        { label: '初级粉丝', value: Math.floor(Math.random() * 30) + 20 },
        { label: '中级粉丝', value: Math.floor(Math.random() * 30) + 30 },
        { label: '高级粉丝', value: Math.floor(Math.random() * 20) + 15 },
        { label: '核心粉丝', value: Math.floor(Math.random() * 10) + 5 }
      ];

      // 初始化兴趣标签数据
      this.topTags = [
        { name: '美食', count: Math.floor(Math.random() * 100) + 50 },
        { name: '旅游', count: Math.floor(Math.random() * 80) + 40 },
        { name: '时尚', count: Math.floor(Math.random() * 60) + 30 }
      ];
      this.mediumTags = [
        { name: '健身', count: Math.floor(Math.random() * 40) + 20 },
        { name: '摄影', count: Math.floor(Math.random() * 30) + 15 },
        { name: '宠物', count: Math.floor(Math.random() * 20) + 10 }
      ];
      this.smallTags = [
        { name: '读书', count: Math.floor(Math.random() * 10) + 5 },
        { name: '音乐', count: Math.floor(Math.random() * 10) + 5 },
        { name: '电影', count: Math.floor(Math.random() * 10) + 5 }
      ];

      // 初始化设备数据
      this.deviceData = [
        { name: 'iPhone', icon: 'apple', color: '#3399FF', percentage: Math.floor(Math.random() * 40) + 30 },
        { name: 'Android', icon: 'android', color: '#4CD964', percentage: Math.floor(Math.random() * 30) + 20 },
        { name: 'iPad', icon: 'apple', color: '#FF9500', percentage: Math.floor(Math.random() * 20) + 10 },
        { name: '其他', icon: 'ellipsis-h', color: '#999999', percentage: 100 - this.deviceData.reduce((sum, device) => sum + device.percentage, 0) }
      ];

      // 初始化消费能力数据
      this.consumptionData = [
        { label: '低消费', value: Math.floor(Math.random() * 30) + 20 },
        { label: '中消费', value: Math.floor(Math.random() * 30) + 30 },
        { label: '高消费', value: Math.floor(Math.random() * 20) + 15 }
      ];
    },
    formatNumber(value) {
      return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    },
    drawGenderChart() {
      const ctx = document.getElementById('genderChart').getContext('2d');
      new Chart(ctx, {
        type: 'pie',
        data: {
          labels: this.genderData.map(item => item.label),
          datasets: [{
            data: this.genderData.map(item => item.value),
            backgroundColor: ['#FF69B4', '#1E90FF', '#D3D3D3']
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    },
    drawAgeChart() {
      const ctx = document.getElementById('ageChart').getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: this.ageData.map(item => item.label),
          datasets: [{
            label: '粉丝数量',
            data: this.ageData.map(item => item.value),
            backgroundColor: '#4CD964'
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    },
    drawLocationChart() {
      const ctx = document.getElementById('locationChart').getContext('2d');
      new Chart(ctx, {
        type: 'pie',
        data: {
          labels: this.locationData.map(item => item.label),
          datasets: [{
            data: this.locationData.map(item => item.value),
            backgroundColor: ['#3399FF', '#4CD964', '#FF9500', '#FE2C55', '#999999']
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    },
    drawLevelChart() {
      const ctx = document.getElementById('levelChart').getContext('2d');
      new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels: this.levelData.map(item => item.label),
          datasets: [{
            data: this.levelData.map(item => item.value),
            backgroundColor: ['#3399FF', '#4CD964', '#FF9500', '#FE2C55']
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    },
    drawActiveTimeChart() {
      const ctx = document.getElementById('activeTimeChart').getContext('2d');
      new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          datasets: [{
            label: '活跃粉丝数',
            data: [Math.floor(Math.random() * 100) + 10, Math.floor(Math.random() * 100) + 10, Math.floor(Math.random() * 100) + 10, Math.floor(Math.random() * 100) + 10, Math.floor(Math.random() * 100) + 10, Math.floor(Math.random() * 100) + 10, Math.floor(Math.random() * 100) + 10],
            borderColor: '#FF9500',
            backgroundColor: 'rgba(255, 149, 0, 0.1)',
            fill: true
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    },
    drawDeviceChart() {
      const ctx = document.getElementById('deviceChart').getContext('2d');
      new Chart(ctx, {
        type: 'pie',
        data: {
          labels: this.deviceData.map(item => item.name),
          datasets: [{
            data: this.deviceData.map(item => item.percentage),
            backgroundColor: this.deviceData.map(item => item.color)
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    },
    drawConsumptionChart() {
      const ctx = document.getElementById('consumptionChart').getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: this.consumptionData.map(item => item.label),
          datasets: [{
            label: '粉丝数量',
            data: this.consumptionData.map(item => item.value),
            backgroundColor: ['#FF9500', '#4CD964', '#3399FF']
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    },
    exportData() {
      console.log('导出粉丝画像数据');
    },
    refreshTags() {
      console.log('刷新兴趣标签数据');
    },
    refreshDeviceData() {
      console.log('刷新设备数据');
    },
    refreshConsumptionData() {
      console.log('刷新消费能力数据');
    }
  }
}
</script>

<style scoped lang="scss">

    /* 粉丝画像相关样式 */
    .fans-profile {
      background-color: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      margin-bottom: 20px;
    }

    .profile-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .profile-filters {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .date-filter {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .date-filter .el-radio-group {
      display: flex;
    }

    .date-filter .el-radio-button__inner {
      padding: 8px 16px;
    }

    .export-button {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    /* 粉丝画像卡片 */
    .profile-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
      margin-bottom: 20px;
    }

    .profile-card {
      background-color: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      transition: all 0.3s ease;
    }

    .profile-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .card-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 16px;
    }

    .card-content {
      height: 280px;
    }

    /* 粉丝兴趣标签 */
    .interest-tags {
      background-color: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      margin-bottom: 20px;
    }

    .tags-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .tags-title {
      font-size: 16px;
      font-weight: 500;
    }

    .tags-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 10px 0;
    }

    .tag-item {
      padding: 8px 16px;
      background-color: #F8F8F8;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .tag-item:hover {
      background-color: rgba(254, 44, 85, 0.1);
      color: var(--primary-color);
    }

    .tag-large {
      font-size: 16px;
      font-weight: 500;
    }

    .tag-medium {
      font-size: 14px;
    }

    .tag-small {
      font-size: 12px;
      color: var(--gray-color);
    }

    /* 粉丝活跃时间 */
    .active-time {
      background-color: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      margin-bottom: 20px;
    }

    .active-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .active-title {
      font-size: 16px;
      font-weight: 500;
    }

    .active-filters {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .active-chart {
      height: 300px;
    }

    /* 粉丝设备分布 */
    .device-distribution {
      background-color: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      margin-bottom: 20px;
    }

    .device-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .device-title {
      font-size: 16px;
      font-weight: 500;
    }

    .device-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .device-chart {
      height: 300px;
    }

    .device-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .device-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      border-radius: 8px;
      background-color: #F8F8F8;
    }

    .device-name {
      font-weight: 500;
    }

    .device-percentage {
      color: var(--gray-color);
    }

    /* 粉丝消费能力 */
    .consumption-ability {
      background-color: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      margin-bottom: 20px;
    }

    .consumption-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .consumption-title {
      font-size: 16px;
      font-weight: 500;
    }

    .consumption-chart {
      height: 300px;
    }

  </style>
